<template>
    <div class="boxLogin">
      <router-link :to="{name:'Administration'}"><img src="../../assets/小图标/短箭头.png"></router-link>
      <div>
        <p>手机号密码</p>
        <p>+86 <input type="text" placeholder="请输入手机号" ref="tell"></p>
        <p>
          密码 <input :type=passtype placeholder="请输入密码" ref="pass"><img :src=src @click="info">
        </p>
        <p>忘记密码</p>
        <div>
          <p @click="login">登录</p>
          <router-link :to="{name:'Register'}">注册新账号</router-link>
        </div>
      </div>
    </div>
</template>

<script>
  let off=true;
    export default {
        name: "Login",
      data(){
        return{
          passtype:"password",
          src:require("../../assets/小图标/yan1.png"),
          username:"",
          userpass:""
        }
      },
      methods:{
          // 可视化
          info(){
              if(off){
                this.src=require("../../assets/小图标/yan1.png")
                this.passtype="password"
              }else{
                this.src=require("../../assets/小图标/yan.png")
                this.passtype="text"
              }
            off=!off
            },
          // 登录验证
          login(){
            let tell=this.$refs.tell.value;
            let pass=this.$refs.pass.value
            if (tell == this.username && pass == this.userpass){
              this.$router.push('/administration')
            }else {
              alert("手机号或密码输入错误")
            }
          }
        },
      created() {
          let userin = this.$local.get('user');
          if (userin) {
            this.username = userin.username
          }
          let userfo = this.$local.get('pass');
          if (userfo) {
            this.userpass = userfo.userpass
          }
          console.log(this.username);
          console.log(this.userpass)
      }
    }
</script>

<style>
  .boxLogin a>img{
    width: 1rem;
    height: 1rem;
  }
  .boxLogin>div{
    font-size: .55rem;
    margin: 0 .3rem;
  }
  .boxLogin>div p:nth-child(1){
    text-align: center;
    padding-bottom: .8rem;
  }
  .boxLogin p input{
    margin-left: .6rem;
    margin-bottom: .5rem;
    position: relative;
    height: 1rem;
  }
  .boxLogin p>img{
    width: .8rem;
    height: .8rem;
    position: absolute;
    right: 1.3rem;
  }
  .boxLogin p:nth-child(4){
    float: right;
    padding-right: .5rem;
    font-size: .45rem;
    color: #969696;
  }
  .boxLogin div>div{
    clear: both;
    text-align: center;
  }
  .boxLogin div>div p{
    padding: 0 !important;
    margin: 1rem 0 .5rem;
    line-height: 1.5rem;
    background: #0780f5;
    color: #ffffff;
    border-radius: 100px;
  }
  .boxLogin div>div a{
    font-size: .45rem;
  }
</style>
